<template>
  <div>
    <image-upload
      field="img"
      @crop-success="cropSuccess"
      @crop-upload-success="cropUploadSuccess"
      @crop-upload-fail="cropUploadFail"
      v-model="show"
      :width="width"
      :height="height"
      :url="url"
      :params="params"
      :headers="headers"
      img-format="png"
    >
    </image-upload>
    <el-button @click="toggleShow" :disabled="buttonDisable"
      >点击上传</el-button
    >
    <div>
    <ul v-if="fileUrl" class="el-upload-list el-upload-list--picture-card">
      <li tabindex="0" class="el-upload-list__item is-ready">
        <div>
          <img
            :src="fileUrl"
            alt=""
            class="el-upload-list__item-thumbnail"
          />
          <span class="el-upload-list__item-actions"
            ><span class="el-upload-list__item-preview"
              ><i class="el-icon-zoom-in" @click="dialogShow"></i
            ></span>
            <span class="el-upload-list__item-delete"
              ><i class="el-icon-delete" @click="removefile"></i></span
          ></span>
        </div>
      </li>
    </ul>
    </div>
    <el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="fileUrl" alt="">
</el-dialog>
  </div>
</template>

<script>
import ImageUpload from "vue-image-crop-upload";
import http from "../../libs/http";
export default {
  name: "CropUploadUrl",
  components: {
    ImageUpload,
  },
  computed: {
    buttonDisable() {
      return this.fileUrl.length > 0;
    },
  },
  data() {
    return {
      show: false,
      dialogVisible: false,
    };
  },
  watch: {
    fileUrl(newvalue,oldvalue){
      if(newvalue == null){
        this.$emit("update:fileUrl", "");
      }
    }
  },
  props: {
    params: {
      type: Object,
      default() {
        return {};
      },
    },
    headers: {
      type: Object,
      default() {
        return {
          smail: "*_~",
        };
      },
    },
    url: {
      type: String,
      default() {
        return "/upload/upload";
      },
    },
    fileUrl: {
      type: String,
      default: "",
    },
    width: {
      type: Number,
      default() {
        return 400;
      },
    },
    height: {
      type: Number,
      default() {
        return 400;
      },
    },
    isDeleteRemoteFile: {
      type: Boolean,
      default() {
        return true;
      },
    },
    deleteRemoteRrl: {
      type: String,
      default() {
        return "/upload/deletefile";
      },
    },
  },
  methods: {
    //drop
    toggleShow() {
      this.show = !this.show;
    },
    dialogShow() {
      this.dialogVisible = !this.dialogVisible;
    },
    /**
     * crop success
     *
     * [param] imgDataUrl
     * [param] field
     */
    cropSuccess(imgDataUrl, field) {
      console.log("-------- crop success --------");
    },
    /**
     * upload success
     *
     * [param] jsonData  server api return data, already json encode
     * [param] field
     */
    cropUploadSuccess(jsonData, field) {
      this.toggleShow();
      this.$emit("update:fileUrl", jsonData.url);
      this.$emit("file-url-change", jsonData.url);
    },
    removefile(index) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.$emit("update:fileUrl", "");
             if (this.isDeleteRemoteFile) {
        http.post(this.deleteRemoteRrl, {
          url: this.fileUrl,
        });
             }
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      
    },
    /**
     * upload fail
     *
     * [param] status    server api return error status, like 500
     * [param] field
     */
    cropUploadFail(status, field) {
      console.log("-------- upload fail --------");
      console.log(status);
      console.log("field: " + field);
    },
  },
};
</script>

<style scoped>
</style>
